<template>
  <div class="banner">
    <div class="imgbox">
      <img v-for="(item,idx) in img" :src="item.img" :alt="item.alt" :title="item.title" :key="idx" />
    </div>
    <div class="btns">
      <button @click="left">左</button>
      <button @click="right">右</button>
    </div>
    <div class="list">
      <!-- 放置分页指示器 -->
    </div>
  </div>
</template>

<script>
export default {
  props: ['img'],
  data () {
    return {
      index: 0
    }
  },
  methods: {
    left () {
      this.index--
      this.renderImg()
    },
    right () {
      this.index++
      this.renderImg()
    },
    renderImg () {
      console.log('这是子组件内部：' + this.index)
      this.$emit('getBannerIndex', this.index)
      // console.log(this.index)
    }
  }
}
</script>

<style lang="scss">
.banner{
  width: 100vw;
  height: 3rem;
  position: relative;
  .imgbox{
    img{
      position:absolute;
      left:0;top:0;
      width: 100vw;
      height:3rem;
      background: red;
    }
  }
  .btns{
    width:100vw;
    button{
      position:absolute;
      &:nth-child(1){
        left:0
      };
      &:nth-child(2){
        right:0
      }
    }
  }
}
</style>
